
/* 返回通用柱状图模板 */
const barOptions = (unitStr) => {
  let unit = {
    score: { size: '分数', unit: '分' },
    percent: { size: '百分比', unit: '%' }
  };

  return {
    /* 背景透明 */
    background: 'rgba(0, 0, 0, 0)',

    /* 提示框 */
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'    // 默认为直线，可选为：'line' 线 | 'shadow' 块 | 'cross' 十字精准
      },
      formatter: '{b}：{c} ' + unit[unitStr].unit,
      extraCssText: 'width: auto !important;'
    },

    /* 蓝色 */
    // color: ['#1890FF'],

    /* 橙色 */
    color: ['#FF6600'],

    /* 绿色 */
    // color: ['#99df21'],

    grid: {
      top: '15%',
      left: '3%',
      right: '3%',
      bottom: '12%',
      containLabel: true
    },

    /* 底部坐标参数 */
    xAxis: [{
      type: 'category',
      data: [
        '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06',
        '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'
      ],
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        margin: 20,       // 底部文字和横线的距离
        rotate: -30       // 底部文字倾斜角度
      }
    }],

    /* 左边坐标参数 */
    yAxis: [{
      name: unit[unitStr].size,
      type: 'value',
      axisLabel: {
        formatter: '{value} ' + unit[unitStr].unit
      }
    }],

    /* 要展示的实际数据 */
    series: [{
      // name: '直接访问',
      type: 'bar',
      barWidth: '40%',
      data: [10, 52, 200, 334, 390, 330, 220]
    }]
  }
}

/* 返回同比图表模板 */
const barOptionsDb = () => {
  return {
    tooltip: {
      trigger: 'axis',
      formatter: '{a0}{b0}：{c0}  <br/> {a1}{b1}：{c1} <br/> {a2}{b2}：{c2} <br/> {a3}{b3}：{c3}% <br/> {a4}{b4}：{c4}%',
      axisPointer: {
        type: 'cross'   // 默认为直线，可选为：'line' 线 | 'shadow' 块 | 'cross' 十字精准
      }
    },

    color: ['#91caff', '#1890FF','#186aff', '#8eec7f', '#ffd818'],
    // color: ['#4099ff', '#81e300', '#ffcd00'],
    grid: {
      top: '20%',
      left: '3%',
      right: '3%',
      bottom: '5%',
      containLabel: true
    },

    legend: {
      type: 'scroll',
      orient: 'horizontal',
      top: '6%',
      data: ['2019年', '2020年', '同比']
    },

    xAxis: [{
      type: 'category',
      boundaryGap:true,
      axisTick:{
        alignWithLabel: true
      },
      // data: [
      //   '1月合计', '2月合计', '3月合计', '4月合计', '5月合计', '6月合计',
      //   '7月合计', '8月合计', '9月合计', '10月合计', '11月合计', '12月合计'
      // ]
      data: [
        '1月', '2月', '3月', '4月', '5月', '6月',
        '7月', '8月', '9月', '10月', '11月', '12月'
      ]
    }],

    yAxis: [{
      type: 'value',
      // name: '百分比(%)',
      axisLabel: {
        formatter: '{value}' // %'
      },
      axisLine:{
        show: false
      },
      axisTick:{
        show: false
      },
      splitNumber:2
    }, {
      type: 'value',
      name: '百分比(%)',
      axisLabel: {
        formatter: '{value} %'
      },
      axisLine:{
        show: false
      },
      axisTick:{
        show: false
      },
      splitNumber:2
    }],

    series: [{
      name: '2018年',
      type: 'bar',
      itemStyle: {
        barBorderRadius: 5
      },
      barWidth: '25%',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    }, {
      name: '2019年',
      type: 'bar',
      itemStyle: {
        barBorderRadius: 5
      },
      barWidth: '25%',
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    }, {
      name: '2019年',
      type: 'bar',
      itemStyle: {
        barBorderRadius: 5
      },
      barWidth: '25%',
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    }, {
      name: '同比',
      type: 'line',
      yAxisIndex: 1,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }, {
      name: '同比',
      type: 'line',
      yAxisIndex: 1,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }]
  };

}



export { barOptions, barOptionsDb }
